<template>
  <div v-html="mdHtml"></div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import 'highlight.js/styles/github.css'
import 'github-markdown-css/github-markdown.css'
import marked from 'marked'
import hljs from 'highlight.js'

@Component
export default class QMarkdown extends Vue {
  @Prop() private text: string

  get mdHtml() {
    if (this.text) {
      const defaultOptions = {
        renderer: new marked.Renderer(),
        gfm: true,
        smartLists: true,
        smartypants: true,
        highlight(code) {
          return hljs.highlightAuto(code).value
        }
      }
      marked.setOptions(defaultOptions)
      return marked(this.text)
    }
    return ''
  }
}
</script>
